<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script src="./js/jquery-3.4.1.js"></script>
  <title>地图显示</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    .bottom-center .amap-info-sharp {
      border-top: 8px solid rgba(0, 17, 31, .85);
    }

    /* .bottom-center .amap-info-sharp:hover{
            border-top: 8px solid rgba(0, 17, 31, .85);
        } */
    .amap-info-content:hover .amap-info-sharp {
      border-top: 8px solid rgba(0, 17, 31, .85);
    }

    .amap-info-content {
      background: rgba(0, 17, 31, .85);
      border-radius: 4px;
      padding: 0 !important;
      padding-bottom: 20px !important;
    }

    .amap-info-content h3 {
      margin-top: 0 !important;
      height: 40px !important;
      line-height: 40px !important;
      background: rgba(17, 31, 52, .85) !important;
      padding: 0 30px !important;
      font-family: 'MicroSoft Yahei' !important;
      font-size: 14px !important;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 304px;
      white-space: nowrap;
    }

    .amap-info-content>div div {
      padding: 0 30px !important;
      font-family: 'MicroSoft Yahei' !important;
      font-size: 12px !important;
    }

    .amap-info-close {
      right: 10px !important;
      top: 13px !important;
    }

    .btn {
      border-radius: 4px !important;
    }

    .btn-suucess {
      color: #FFFFFF;
      background: #25A5F7;
    }

  </style>
</head>

<body>
  <div id="container"></div>
  <!-- 加载地图JSAPI脚本 -->
  <script src="https://webapi.amap.com/maps?v=1.4.13&key=5c2f9234ee4797dca920595a2f7352cd"></script>
  <script>
    var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      // mapStyle: 'amap://styles/darkblue',
      zoom: 15, //初始化地图层级
      center: [116.52, 39.776] //初始化地图中心点
    });
    // // 创建一个 Marker 实例：
    // var marker = new AMap.Marker({
    //     position: new AMap.LngLat(116.52, 39.776),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //     title: '北京'
    // });
    // // 将创建的点标记添加到已有的地图实例：
    // map.add(marker);

    var infoWindow = new AMap.InfoWindow({
      offset: new AMap.Pixel(0, -30)
    });
    var icon_list = ["./img/position_gray.png", "./img/position_green.png", "./img/position_green_1.png",
      "./img/position_green_2.png", "./img/position_blue.png", "./img/position_orange.png", "./img/position_red.png",
      "./img/position_blue_1.png"
    ]
    var markets = [];
    var loadList = function (data, e) {
      var marker1 = new AMap.Marker({
        position: [Number(data.longitude), Number(data.latitude)],
        // icon: icon_list[e],
        map: map
      });
      marker1.school = data.address
      // marker1.content = '<div style="color:#FFFFFF;" title="' + data.projectName + '"><h3>' + data.projectName +
      //   '</h3>';
      // marker1.content +=
      //   '<div style="margin-top:5px; ">建设单位 ：' + data.workCompany + '</div>';
      // marker1.content +=
      //   '<div style="margin-top:5px; ">总包单位 ：' + data.contractorCompany + '</div>';
      // marker1.content +=
      //   '<div style="margin-top:5px; ">工程阶段 ：' + data.projectStageVal + '</div>';
      // marker1.content +=
      //   '<div style="margin-top:5px; ">报建时间 ：' + data.createTime + '</div>';
      // marker1.content +=
      //   '<div style="margin-top:10px; ">';

      // marker1.content += '</div></div>';
      marker1.on('click', newMAp);
      // infoWindow.setContent(marker1.content);
      // markets.push(marker1);
    }
    var author_token = localStorage.getItem('author_token');
    var mapList = "";

    var gets = function (e) {
      var maps = map;
      // 
      markets = [];
      var path = markets;
      maps.clearMap();
      maps.setZoom(12);

      /*
        测试数据
      */

      mapList = [{
        name: '常营北辰福第中心',
        address: '常营北辰福第中心 · 北京朝阳',
        latitude: "39.9315823897",
        longitude: "116.5997296572",
      },{
        name: '九棵树大稿艺术中心',
        address: "九棵树大稿艺术中心 · 北京通州",
        latitude: "39.8710710000",
        longitude: "116.6378710000",
      },{
        name: '土桥华远铭悦中心',
        address: "土桥华远铭悦中心 · 北京通州",
        latitude: "39.8729320000",
        longitude: "116.6980900000",
      },
      {
        name: '临河里华业玫瑰中心',
        address: "临河里华业玫瑰中心 · 北京通州",
        latitude: "39.8786940000",
        longitude: "116.6846050000",
      },
      {
        name: '梨园柳岸方园中心',
        address: "梨园柳岸方园中心 · 北京通州",
        latitude: "39.8943750000",
        longitude: "116.6849930000",
      },
      {
        name: '管庄远洋一方中心',
        address: "管庄远洋一方中心 · 北京通州",
        latitude: "39.9076670000",
        longitude: "116.5990460000",
      },
    
      ];
      var num = e;
      var arr=[];
      mapList.forEach(function (item) {
        loadList(item, num);
        arr.push([Number(item.longitude), Number(item.latitude)])
      });
      var polygon = new AMap.Polygon({
        path: arr, //以5个点的坐标创建一个隐藏的多边形
        map: maps,
        strokeOpacity: 0, //透明
        fillOpacity: 0, //透明
        bubble: true //事件穿透到地图
      });
      var overlaysList = maps.getAllOverlays('polygon'); //获取多边形图层 

      //2.使用setFitView方法
      map.setFitView(overlaysList);

      // $.ajax({
      //   url: "http://47.112.148.178:80/gov/gov/tmProject/getProjectListByStage",
      //   dataType: "json",
      //   type: "POST", //请求方式
      //   headers: {
      //     author_token: author_token
      //   },
      //   data: {
      //     projectStage: e
      //   },
      //   success: function (res) {
      //     //请求成功时处理
      //     mapList = res.data;
      //     var num = e;
      //     var arr=[];
      //     mapList.forEach(function (item) {
      //       loadList(item, num);
      //       arr.push([Number(item.longitude), Number(item.latitude)])
      //     });
      //     var polygon = new AMap.Polygon({
      //       path: arr, //以5个点的坐标创建一个隐藏的多边形
      //       map: maps,
      //       strokeOpacity: 0, //透明
      //       fillOpacity: 0, //透明
      //       bubble: true //事件穿透到地图
      //     });
      //     var overlaysList = maps.getAllOverlays('polygon'); //获取多边形图层 

      //     //2.使用setFitView方法
      //     map.setFitView(overlaysList);
      //   },

      //   error: function (err) {
      //     console.log(err)
      //   }
      // });
    }
    gets(7)
    var pointList = function (e) {
      gets(e)

    }
    function newMAp(e) {
      //map.setCenter(e.target.getPosition());
      // console.log(e.target.school)
      console.log(e.target.getPosition())

      map.setZoomAndCenter(18, e.target.getPosition());
      window.parent.changeEquipmentData(e);

      var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30)
      });
      infoWindow.setContent(e.target.content);
      infoWindow.open(map, e.target.getPosition());
    }
    function moveToSchool(e) {
      map.setZoomAndCenter(18, e);
    }

  </script>
</body>

</html>
